import { connect } from 'dva';
import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';

const layout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
function ListForUpdate({
  match: {
    params: { id },
  },
  customers,
  dispatch,
}) {
  const actualUser = customers.find((c) => c.key === id);

  const onFinish = (values) => {
    console.log('Success:', values);
    dispatch({
      type: 'customers/update',
      payload: {
        e: {
          ...actualUser,
          firstName: newFirstName,
          lastName: newLastName,
          age: newAge,
          address: newAddress,
        },
      },
    });
    console.log('保存成功Success:');
  };
  const [newFirstName, setNewFirstName] = useState('');
  const [newLastName, setNewLastName] = useState('');
  const [newAge, setNewAge] = useState('');
  const [newAddress, setNewAddress] = useState('');

  return (
    <div>
      <h1>This is user {actualUser.firstName} 's page</h1>

      <Form
        {...layout}
        name="submit"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item label="firstName" name="firstName">
          <Input 
          defaultValue={actualUser.firstName} 
          onChange={(e) => setNewFirstName(e.target.value)}
           />
        </Form.Item>

        <Form.Item
          label="lastName"
          name="lastName"
          rules={[{ required: true, message: 'Please input your lastName!' }]}
        >
          <Input
            defaultValue={actualUser.lastName}
            // value={newLastName}
            onChange={(e) => setNewLastName(e.target.value)}
          />
        </Form.Item>

        <Form.Item
          label="Age"
          name="age"
          rules={[{ required: true, message: 'Please input your age!' }]}
        >
          <Input
            // value={newAge}
            defaultValue={actualUser.age}
            onChange={(e) => setNewAge(e.target.value)}
          />
        </Form.Item>

        <Form.Item
          label="Address"
          name="address"
          rules={[{ required: true, message: 'Please input your address!' }]}
        >
          <Input
            // value={newAddress}
            defaultValue={actualUser.address}
            onChange={(e) => setNewAddress(e.target.value)}
          />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            {/* <Link to="/customers">Submit</Link> */}
            更新
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
export default connect(({ customers }) => ({ customers }))(ListForUpdate);
